<template>

<div style="font-size: 30px; color: #415058; text-align: center;position: absolute;left: 1000px; font-weight: bold;">
    充电桩资源情况
</div>
<br>
    <el-row class="mb-4">
    <el-button type="E楼" round >E楼</el-button>
    <el-button type="环境学院" round>环境学院</el-button>
    <el-button type="外语学院" round>外语学院</el-button>
    <el-button type="北体育场" round>北体育场</el-button>
    <el-button type="钱江湾#40" round>钱江湾#40</el-button>
  </el-row>

  <div class="image-grid">
  <!-- First Row -->
  <div class="image-container">
    <img src="../../static/chargefree.png" alt="1">
    <div class="image-label">1</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="2">
    <div class="image-label">2</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="3">
    <div class="image-label">3</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="4">
    <div class="image-label">4</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="5">
    <div class="image-label">5</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargefree.png" alt="6">
    <div class="image-label">6</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargefree.png" alt="7">
    <div class="image-label">7</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargefree.png" alt="8">
    <div class="image-label">8</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargefree.png" alt="9">
    <div class="image-label">9</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargefree.png" alt="10">
    <div class="image-label">10</div>
  </div>

  <!-- Repeat this block for each image up to 10 images in the first row -->

  <!-- Second Row -->
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="11">
    <div class="image-label">11</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="12">
    <div class="image-label">12</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="13">
    <div class="image-label">13</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="14">
    <div class="image-label">14</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="15">
    <div class="image-label">15</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="16">
    <div class="image-label">16</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="17">
    <div class="image-label">17</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="18">
    <div class="image-label">18</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargeoccupy.png" alt="19">
    <div class="image-label">19</div>
  </div>
  <div class="image-container">
    <img src="../../static/chargefree.png" alt="20">
    <div class="image-label">20</div>
  </div>
  <!-- Repeat this block for each image up to 10 images in the second row -->
</div>
</template>

<style>
.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 间隔大小 */
  margin-top: 20px;
  width: 1600px;
}

.image-container {
  width: calc(10% - 10px); /* 每行显示10个图片，减去间隔的宽度 */
  position: relative;
}

.image-label {
  position: absolute;
  bottom: 5px; /* 调整编号位置 */
  left: 50%; /* 居中编号 */
  transform: translateX(-50%); /* 居中编号 */
  color: #791C00;
  font-weight: bold;
}
</style>